<template>
  <div class="wdlygd">
    <div class="wdlygd_top">
      <div class="wdlygd_top_text">稳定利用耕地</div>
      <el-switch
        v-model="switchValue"
        active-color="#409EFF"
        inactive-color="#d1d1d1"
        :disabled="isdisabled"
        @change="switchChange"
      >
      </el-switch>
    </div>
    <div class="wdlygd_middle">
      <div class="wdlygd_middle_button">
        <div
          class="wdlygd_middle_button_image"
          :class="boxBlockItem == 1 ? 'image_active' : ''"
        >
          <div
            class="wdlygd_middle_content"
            @click="box_blockClick(1)"
            v-if="parseFloat(areaDataHa)"
          >
            <div class="wdlygd_middle_content_top">选址涉及稳定利用耕地</div>
            <div class="wdlygd_middle_content_bottom">
              {{ areaDataHa }} 公顷 (合 {{ areaDataMu }} 亩)
            </div>
          </div>
          <div v-else class="wdlygd_middle_content">
            <div class="wdlygd_middle_content_top">选址不涉及稳定利用耕地</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getXzRegion } from "../../../../../api/connect.js";
import tableNames from "../../left/tableNames.json";
import { editMap } from "../../../../../utils/map.js";

export default {
  data() {
    return {
      boxBlockItem: 0,

      // 换算单位
      units: "",

      // 获取到占地面积的值
      areaDatas: "",

      // 获取到占地面积平方的值
      areaDataSquare: "",
      // 获取到占地面积亩的值
      areaDataMu: "",
      // 获取到占地面积公顷的值
      areaDataHa: "",

      //switch的值
      switchValue: false,
      isdisabled: false, //是否禁用

      // 稳定利用耕地图层的loading
      wdlygdLoading: false,
    };
  },
  computed: {
    ...mapState("Sjsx", ["WdlygdData", "unit", "isRegion"]),
  },
  mounted() {
    this.changeUnit();
  },
  methods: {
    ...mapActions({
      setWdlygdLoading_act: "Sjsx/setWdlygdLoading_act",
    }),
    // 判断选中了哪个盒子
    box_blockClick(val) {
      this.boxBlockItem = val;
    },

    // 改变单位，改变值
    changeUnit() {
      // // console.log(this.AreaData,"AreaData的值");
      // // console.log(this.unit,"unit的值");
      // if (this.unit == "m²") {
      //   this.areaDatas = this.WdlygdData.m2; //改变值
      //   this.units = 'm²'  //改变单位
      // } else if (this.unit == "ha") {
      //   this.areaDatas = this.WdlygdData.ha;
      //   this.units = '公顷'
      // } else if (this.unit == "mu") {
      //   this.areaDatas = this.WdlygdData.mu;
      //   this.units = '亩'
      // }
      this.areaDataSquare = this.WdlygdData.m2; //获取到平方单位的数据
      this.areaDataMu = this.WdlygdData.mu; //获取到亩单位的数据
      this.areaDataHa = this.WdlygdData.ha; //获取到公顷单位的数据
    },

    // 点击后画面
    async getRegionData() {
      try {
        const temp = tableNames.find(
          (r) => r.layer_chinese_name === "稳定利用耕地"
        );
        if (this.switchValue == true) {
          const result = await getXzRegion(this.isRegion, temp);
          const polygondata = [];
          const polylinedata = [];
          result.data.map((item, index) => {
            let itemJson = JSON.parse(item);
            const r = parseInt(temp.hex.substr(1, 2), 16) / 255;
            const g = parseInt(temp.hex.substr(3, 2), 16) / 255;
            const b = parseInt(temp.hex.substr(5, 2), 16) / 255;
            const colorArray = [r, g, b, 0.6];
            let o = {
              id: "polygon_" + temp.layer_english_name + "_" + index,
              coordinates: itemJson.geometry.coordinates,
              color: colorArray, //多边形的填充颜色
              intensity: 1, //亮度
              style: 0,
              depthTest: false, //是否做深度检测
            };
            polygondata.push(o);
            itemJson.geometry.coordinates.forEach((item) => {
              // console.log(item, "item");
              if (
                item instanceof Array &&
                item[0] instanceof Array &&
                item[0][0] instanceof Array
              ) {
                item.forEach((mon) => {
                  polylinedata.push({
                    id: "polyline_" + temp.layer_english_name + "_" + index,
                    coordinates: mon, //构成折线的坐标点数组
                    color: [1, 1, 1, 1], //折线颜色
                    style: 0, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 5, //折线宽度
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                });
              } else {
                polylinedata.push({
                  id: "polyline_" + temp.layer_english_name + "_" + index,
                  coordinates: item, //构成折线的坐标点数组
                  color: [1, 1, 1, 1], //折线颜色
                  style: 0, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 5, //折线宽度
                  intensity: 1, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
              }
            });
          });
          // const polygon3ddata = result.data.map((item, index) => {
          //   let itemJson = JSON.parse(item);
          //   console.log(itemJson.geometry.coordinates,'itemJson.geometry.coordinates');

          //   let o = {
          //     id: "polygon3d_" + temp.layer_english_name + "_" + index,
          //     coordinates: itemJson.geometry.coordinates,
          //     color: [1,1,1,0.5], //颜色值
          //     height: 150, //3D多边形的高度
          //     intensity: 2.0, //亮度
          //     style: 2,
          //   };
          //   return o;
          // });
          // debugger;
          temp["polygondata"] = polygondata;
          temp["polylinedata"] = polylinedata;
          console.log(polylinedata, "polylinedata");

          // 调用一次性画3000条数据的方法
          await editMap(polylinedata, 1);
          await editMap(polygondata, 2);

          this.wdlygdLoading = false;
          this.setWdlygdLoading_act(this.wdlygdLoading);
          // this.$store.dispatch("Sjsx/setWdlygdLoading_act", this.wdlygdLoading);

          // await window.__g.polyline.add(polylinedata);
          // await window.__g.polygon.add(polygondata);

          // await window.__g.polygon.focus(polygondata.map((r) => r.id));
        } else if (this.switchValue == false) {
          if (temp["polygondata"] && temp["polygondata"] instanceof Array) {
            // debugger;
            // window.__g.polygon.updateBegin();
            let polygondataIds = [];
            let polylineIds = [];

            temp["polygondata"].forEach((element) => {
              polygondataIds.push(element.id);
            });
            temp["polylinedata"].forEach((element) => {
              polylineIds.push(element.id);
            });

            await window.__g.polygon.delete(polygondataIds);
            await window.__g.polyline.delete(polylineIds);

            //  window.__g.polygon.updateEnd();
            console.log("已经删除");
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error("服务器请求异常，图层加载失败！");
        this.switchValue = false; //请求失败后，将switch框设置为false
        this.wdlygdLoading = false;
        this.setWdlygdLoading_act(this.wdlygdLoading); // 请求失败后，将loading窗关闭
      }
    },

    // switch的改变
    async switchChange(val) {
      console.log(val, "switch改变");
      this.isdisabled = true;
      // this.switchValue = val;
      if (val) {
        if (parseFloat(this.areaDataHa)) {
          this.wdlygdLoading = true;
          this.setWdlygdLoading_act(this.wdlygdLoading);
          // this.$store.dispatch("Sjsx/setWdlygdLoading_act", this.wdlygdLoading);
          await this.getRegionData();
          // this.wdlygdLoading = false;
          // this.$store.dispatch("Sjsx/setWdlygdLoading_act", this.wdlygdLoading);
        } else {
          this.$message.warning("选址不涉及，暂无图层");
          setTimeout(() => {
            this.switchValue = false;
          }, 300);
        }
      } else {
        await this.getRegionData();
      }
      this.isdisabled = false;
    },
  },
  filters: {
    filterUnit(val) {
      if (val == "ha") {
        return "公顷";
      } else if (val == "mu") {
        return "亩";
      } else if (val == "m²") {
        return "平方米";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wdlygd {
  margin-top: 25px;
  height: 160px;
  .wdlygd_top {
    display: flex;
    align-items: center;
    background: url("../../../../../assets/images/home/top.png");
    width: 440px;
    background-size: cover;
    .wdlygd_top_text {
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      line-height: 24px;
      color: #ffffff;
      margin-right: 40px;
    }
  }
  .wdlygd_middle {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    margin-top: 10px;
    .wdlygd_middle_title {
    }
    .wdlygd_middle_button {
      margin-top: 8px;
      display: flex;
      justify-content: center;
      width: 420px;
      .image_active {
        background: url("../../../../../assets/images/home/jianzhuBox.png");
        background-size: 100% 100%;
      }
      .wdlygd_middle_button_image {
        width: 430px;
        height: 100px;
        .wdlygd_middle_content {
          width: 430px;
          height: 100px;
          background: linear-gradient(180deg, #1f3e72 0%, #112650 100%);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-radius: 4px;
          cursor: pointer;
          .wdlygd_middle_content_top {
            font-family: OPPOSans;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 21px;
            color: rgba(255, 255, 255, 0.85);
            // padding-left: 20px;
          }
          .wdlygd_middle_content_bottom {
            padding-top: 10px;
            font-family: HuXiaoBo-NanShen;
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 19px;
            color: #83fae5;
            // padding-left: 20px;
          }
        }
      }
    }
  }
}
</style>
